<template>
  <div @wheel="goWheel" @keydown="keyDown" class="videoinfo_main">
    <div  class="show_video">
      <div class="return_icon" @click="handleClose" >
        <img src="http://43.139.95.60:4009/close.svg" alt="">
      </div>
      <el-carousel 
      ref="swiper"
      indicator-position="none" 
      direction="vertical" :autoplay="false">
        <el-carousel-item v-for="item in playerConfig" :key="item.id" :name="item.id">
          <div class="video_comment">
            <div class="video_info">
              <el-card class="card_play" :body-style="{ padding: '0px' }">
                <Video  class="video_play" :id="item.id" :defaultConfig='defaultConfig' :config="item" :rootStyle="rootStyle" @playerInit="onPlayerInit"></Video>

                <div class="context_play" style="padding: 14px">
                  <div class="title_play">{{ item.name }}</div>
                  <div class="bottom_play">
                    <div class="name_play"></div>
                  </div>
                </div>
                
              </el-card>

            </div>
            <div class="comment">
              <!--传入视频id -->
              <Comment :id="item.id"></Comment>
            </div>
            
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>

</template>

<script setup>
import {ref,reactive,onMounted,defineEmits} from 'vue'
import Video from "@/components/video"
import {request} from "@/utils/request"
import Comment from '@/components/comment'


//基础配置
const defaultConfig = reactive({
  // el: "mse",
  // id:'',
  fluid: true, //自适应视频内容宽高
  fitVideoSize: "auto", //自适应视频内容宽高
  autoplay: false,
  videoInit: true, //初始化显示视频首帧
//   playbackRate: [0.5, 0.75, 1, 1.5, 2],
//   defaultPlaybackRate: 1,
  playsinline: true,
  lang: "zh-cn",
  volume: 0.6,
  fitVideoSize:'fixWidth',
  height:90
  // closeFocusVideoFocus:true,
  // inactive:0,
  
});

//video部分
let player=ref(null)
const rootStyle={
  backgroundColor: "rgba(0,0,0,0.87)"
}
//接收video组件初始化好的视频对象
let onPlayerInit=(val)=>{
  player.value= val;
}
//接入视频
let playerConfig=ref([])
// async function getList(){
//   const resp =await request('/video/list',{
//     method:'GET',
//     params:{
//       token:'',
//       type:''
//     }})
//     console.log('resp.data',resp.payload)
//     // playerConfig.value = [resp.payload[0]]
//     playerConfig.value = resp.payload
// }
playerConfig.value=[{
  id: 1,
name: "ROG掌机性能分析：最强掌机来啦！",
poster: "http://s3hdmp00b.hn-bkt.clouddn.com/geek/ROG掌机性能分析：最强掌机来啦！_shot.jpg",
url:"http://s3hdmp00b.hn-bkt.clouddn.com/geek/ROG掌机性能分析：最强掌机来啦！.mp4",
},{
  id: 2,
name: "RTX4060TI评测：只比3060TI快百分之十",
poster: "http://s3hdmp00b.hn-bkt.clouddn.com/geek/RTX4060TI评测：只比3060TI快百分之十_shot.jpg",
url: "http://s3hdmp00b.hn-bkt.clouddn.com/geek/RTX4060TI评测：只比3060TI快百分之十.mp4"
},
{
  id: 9,
name: "第二代骁龙7+前瞻上手：今年性价比之王来啦？",
poster: "http://s3hdmp00b.hn-bkt.clouddn.com/geek/第二代骁龙7+前瞻上手：今年性价比之王来啦？_shot.jpg",
url: "http://s3hdmp00b.hn-bkt.clouddn.com/geek/第二代骁龙7+前瞻上手：今年性价比之王来啦？.mp4",
},
{id: 3,
name: "RTX4070评测：迷你节能版3080",
poster: "http://s3hdmp00b.hn-bkt.clouddn.com/geek/RTX4070评测：迷你节能版3080_shot.jpg",
url: "http://s3hdmp00b.hn-bkt.clouddn.com/geek/RTX4070评测：迷你节能版3080.mp4"}]
// getList()

//轮播事件
const one=ref(true);//控制轮播
const swiper=ref(null);


//鼠标滚动事件
let  goWheel=(events)=> {
  // 当鼠标滚轮向下滚动时，其返回值大于零，向上滚动时其返回值小于零
  if (events.deltaY > 0 && one.value) {
    swiper.value.next();
    one.value = false;
    setTimeout(() => {
      one.value = true;
    }, 500);
  }
  if (events.deltaY < 0 && one.value) {
    swiper.value.prev();
    one.value = false;
    setTimeout(() => {
      one.value = true;
    }, 500);
  }
}

//键盘滚动事件
let keyDown=() =>{
  document.onkeydown =  (e) => {
    //事件对象兼容
    let e1 = e || event || window.event || arguments.callee.caller.arguments[0]
    //键盘按键判断:左箭头-37;上箭头-38；右箭头-39;下箭头-40
    //左
    if (e1 && e1.keyCode == 38&& one.value) {
      // 按下左箭头
      swiper.value.prev();
      one.value = false;
      setTimeout(() => {
        one.value = true;
      }, 500);
    
    } else if (e1 && e1.keyCode == 40) {
      // 按下右箭头
      swiper.value.next();
      one.value = false;
      setTimeout(() => {
        one.value = true;
      }, 500);

    }
  }
}

//接收list当中点击得到的id
let {idnum} =defineProps({
  config: {
      type: Number,
      default() {
        return {};
      }
    },
})


//点击哪一个视频播放哪一个视频
let handlePlayer=()=>{
  console.log('idnum1111',idnum)
  swiper.value.setActiveItem(idnum)
}

const  emits  = defineEmits(['handleClose']);
//关闭视频
let handleClose=()=>{
  emits('handleClose',false)
  
}


onMounted(() => {
  handlePlayer()
  keyDown()
  // defaultConfig.fullscreenTarget = document.querySelector('.video_box')
})



</script>

<style lang="less">
@white:rgba(123, 121, 121, 0.1);
.return_icon{
  position: absolute;
  height:70px;
  width:70px;
  top:60px;
  left:0px;
  cursor: pointer;
  // background-color: pink;
  z-index:12;
  img{
    width:100%;
    height:100%;
  }
}
.videoinfo_main{
  width:100%;
  height:100%;
  box-sizing: border-box;
  padding-top:60px;
  top:0;
  left:0;
  padding-bottom:10px;
  position: absolute;
  // background-color: yellow;
  background-color:rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(10px);
  //这样才能最高优先级，因为我查看发现视频组件最高的z-idex为10
  z-index:11;
  .show_video{
    // background-color: green;
    height:100%;
    .video_comment{
      height:100%;
      height:100%;
      display:flex;
      flex-direction: row;
      .video_info{
        flex:1;
        .card_play{
          height:100%;
          background-color: #252632;
          margin-right:10px;
          border:0;
          border-radius: 20px;
          .video_play{
            height:100%;
            width:100%;
            // background-color: antiquewhite;
          }
          .context_play{
            height:100%;                              
            .title_play {                                                                                                                                
              color: #FFFFFFE6;
              font-size: 1rem;
              line-height: 1.6rem;
              min-height: 3.2rem;
            }
            .name_play{
              font-size: 1rem;
              color: #FFFFFF80;
            }
          }
        }
        
      }
      .comment{
        width:20%;
        border-radius: 20px;;
        // background-color: red;
      }
    }

  }
  .el-carousel{
    height:100%;
  }
  .el-carousel__container{
    height:100% !important;
  }
  

//   .el-carousel__item:nth-child(2n) {
//   background-color: #99a9bf;
//   // height:100%;
// }

// .el-carousel__item:nth-child(2n + 1) {
//   background-color: #d3dce6;
// }

}

</style>
